/*
* 新增赛区
*AddGameZone.js*/
import React, { PropTypes, PureComponent } from 'react';
import { autobind } from 'core-decorators';
import { Button, Modal, Form, Input, DatePicker, message } from 'antd';
import { connect } from 'react-redux';
import DepartmentList from './DepartmentList';

import style from './addGameZone.less';
const FormItem = Form.Item;

const AddGameZoneForm = Form.create()(
	(props) => {
		const {
			visible,
			onCancel,
			onCreate,
			form,
			type,
			departmentData,
			divisionName,
			dispatch,
			zoneName,
			departmentCode,
			departmentIdList,
		} = props;
		const { getFieldDecorator } = form;
		console.log('ssssss1', props)
		function handleInput(e) {
			dispatch({
				type: 'privateGame/setState',
				payload: {
					divisionName: e.target.value
				}
			})
		}

		
		return (
			visible ?
				<Modal
					className={`${style.AddGameZone} add-AddGameZone`}
					visible={visible}
					title="新增赛区"
					okText="提交"
					cancelText="取消"
					onCancel={onCancel}
					onOk={onCreate}
				>
					<Form layout="vertical">
						{/*<FormItem
							label="请设置新赛区名称:"
						>*/}
						<FormItem
							label="请设置新赛区名称:"  className={style.addDepartment}
						>
								<Input value={divisionName} onChange={handleInput} />
						</FormItem>
						{/*<FormItem
							label="部门:"
						>*/}
						<FormItem
							label="部门:" className={style.addDepartment}
						>
							{
								departmentData ? <DepartmentList
									departmentData={departmentData}
								/> : null
							}
						</FormItem>
					</Form>
				</Modal> : null
		);
	},
);

const mapStateToProps = state => ({
	departmentData: state.privateGame.departmentData,
	divisionName: state.privateGame.divisionName,
	departmentIdList: state.privateGame.departmentIdList
});
const mapDispatchToProps = {
	createDivision: query => ({
		type: 'privateGame/createDivision',
		payload: query || {},
	}),
	setState: query => ({
		type: 'privateGame/setState',
		payload: query || {},
	}),
};

@connect(mapStateToProps, mapDispatchToProps)
class AddGameZone extends PureComponent {
	static propTypes = {
		form: PropTypes.object.isRequired,
	}
	constructor(props) {
		super(props);
		this.state = {
			visible: false,
			modalHeight: 0,
		};
	}
	componentDidUpdate() {
		const screenHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
		const ele = document.querySelector('.add-AddGameZone .ant-modal-body');
		if (ele) {
			ele.style.height = `${screenHeight * 0.6}px`;
		}

	}
	showModal = () => {
		this.setState({ visible: true });
	}

	handleCancel = () => {
		const { dispatch } = this.props;
		this.setState({ visible: false });
		dispatch({
			type: 'privateGame/setState',
			payload: {
				'departmentIdList': [],
				'divisionName': ''
			}
		})

	}
	componentWillMount() {
		const { dispatch } = this.props;

		dispatch({
			type: 'privateGame/setState',
			payload: {
				departmentIdList: []
			}
		})
	}

	handleCreate = () => {
		const form = this.form;
		const {
			createDivision,
			editDivision,
			divisionName,
			departmentIdList,
			departmentList,
			id,
			type,
		} = this.props;
		Array.from(new Set(departmentIdList))
		console.log('Received', this.props)
		form.validateFields((err, values) => {
			if (err) {
				return;
			}
			console.log('Received values of form:>>>', values);
			if (divisionName == '' && _.isEmpty(departmentIdList)) {
				message.warning('请输入赛区名称');
				message.warning('请选择部门');
				this.setState({ visible: true });
			} else if (divisionName == '' && !_.isEmpty(departmentIdList)) {
				message.warning('请输入赛区名称');
				this.setState({ visible: true });
			} else if (divisionName !== '' && _.isEmpty(departmentIdList)) {
				message.warning('请选择部门');
				this.setState({ visible: true });
			} else if (divisionName !== '' && !_.isEmpty(departmentIdList)) {
				createDivision({
					name: divisionName,
					departmentIdList: departmentIdList,
					competitionId: id
				})
				this.setState({ visible: false });
			}
			form.resetFields();
		});
	}

	saveFormRef = (form) => {
		this.form = form;
	}

	render() {
		const {
			type,
			departmentData,
			divisionName,
			dispatch,
			id,
		} = this.props;
		console.log('sssssss', this.props)

		return (
			<div>
				<Button type="primary" onClick={this.showModal}>新增赛区</Button>
				<AddGameZoneForm
					ref={this.saveFormRef}
					visible={this.state.visible}
					onCancel={this.handleCancel}
					onCreate={this.handleCreate}
					departmentData={departmentData}
					divisionName={divisionName}
					dispatch={dispatch}
					id={id}
				/>
			</div>
		);
	}
}
export default Form.create({
})(AddGameZone);